<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
      /*.box {
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-top-color: red;
          border-bottom-color: blue;
          border-right-color: deeppink;
          border-left-color: olivedrab;
      }*/
      .chart {
          width: 80px;
          height: 80px;
      }
  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
    const style = {
        "version": 8,
        "name": "lzugis", // dark, light, pink
        "sources": {
            "nav": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "nav",
            "type": "raster",
            "source": "nav",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.5,
        minZoom: 2,
        maxZoom: 18
    });

    let data = []
    let popup

    map.on('load', function () {
        popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false,
            className: 'my-popup',
            offset: [0, -8],
            anchor: 'bottom'
        });

        $.get('data/point.geojson', res => {
            data = res.features
            data.forEach((item, index) => {
                const coords = item.geometry.coordinates
                const div = document.createElement('div')
                div.setAttribute('class', 'chart')
                new mapboxgl.Marker({
                    element: div
                }).setLngLat(coords).addTo(map);
                generateChart(div)
            })
        })
    })

    function generateChart(dom) {
        let myChart = echarts.init(dom);
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                show: false
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '40%',
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
</body>
</html>